<!doctype html>
<html lang="zh-CN">

<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap 的 CSS js 文件 -->
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'css/bootstrap.min.css') }}">
  <script src="{{ url_for('static',filename='jQuery/jquery.min.js') }}"></script>
  <script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
  <title>SDC_gamma</title>
</head>

<!-- 界面 -->

<body>

  <!-- 导航栏 -->
  <div class="sticky-top">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <img src="../static/img/logo.jpeg" width="30" height="30" />
      <a class="navbar-brand" href="#">SDC-gamma</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link active" href="connect">
              <img src="../static/img/icon/link-45deg.svg" width="25" height="25" />
              CONNECT <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-expanded="false">
              <img src="../static/img/icon/gear.svg" width="25" height="25" />
              CONFIGURATION</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="configuration_ud">Update and Download</a>
              <a class="dropdown-item" href="configuration_read">Read and Curve</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-expanded="false">
              <img src="../static/img/icon/graph-up.svg" width="20" height="20" />
              CURVE
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="all_curve">All Curve </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="VI">VI</a>
              <a class="dropdown-item" href="wave">四通道波形</a>
              <a class="dropdown-item" href="Power">能谱</a>
              <a class="dropdown-item" href="Vbr">Vbr</a>
              <a class="dropdown-item" href="bias">偏压</a>
              <a class="dropdown-item" href="temp">温度</a>
              <a class="dropdown-item" href="iMon">SiPM漏电流</a>
              <a class="dropdown-item" href="iSys">系统电流</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <!-- 公司logo -->
  <div style="height: 100px;"></div>
  <div class="d-flex justify-content-center">
    <div class="shadow-lg p-3 mb-3 bg-white rounded" style="width: 420px;">
      <div class="d-flex justify-content-center">
        <img src="../static/img/logo.jpeg" width="250" height="250" />
      </div>

      <!-- IP输入框 -->
      <div>
        <div class="d-flex justify-content-center">
          <div class="d-inline-flex p-2 bd-highlight" style="width: 280px">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text font-weight-bold">&nbsp&nbspIP&nbsp&nbsp</span>
              </div>
              <input type="text" id="IP-address" class="form-control font-weight-bold" placeholder="IP-address" aria-label="IP-address"
                aria-describedby="IP-address">
            </div>
          </div>
        </div>

        <!-- port输入框 -->
        <div>
          <div class="d-flex justify-content-center">
            <div class="d-inline-flex p-2 bd-highlight" style="width: 280px">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text font-weight-bold">port</span>
                </div>
                <input type="text number"  id="port" class="form-control font-weight-bold" placeholder="port" aria-label="port"
                  aria-describedby="port">
              </div>
            </div>
          </div>

          <!-- 连接按钮 -->
          <div>
            <div class="d-flex justify-content-center">
              <div class="d-inline-flex p-1 bd-highlight">
                <button type="button" class="btn btn-success font-weight-bold" style="width: 100px;" onclick="connect()">connect</button>
              </div>
              <div class="d-inline-flex p-1 bd-highlight">
                <button type="button" class="btn btn-secondary font-weight-bold" style="width: 100px;">search</button>
              </div>
            </div>
          </div>
        </div>

        <div style="height: 30px;"></div>
      </div>
    </div>
  </div>
  <!-- 尾注 -->
  <div style="height: 30px;"></div>
  <div class="d-flex align-items-end">
    <div style="width: 1500px;"></div>
    <p class="text-muted">@copyright 星测未来科技有限公司</p>
  </div>
</body>
  <script type="text/javascript">
    
    // udp连接
    function connect(){
      var obj0 = document.getElementById('IP-address');
      var obj1 = document.getElementById('port');
      $.get('/udp_connect', {
            // "IP":obj0.value,
            // "port":obj1.value,
          }, 
          function(data){
            json_data = JSON.parse(data);
            if (json_data.status == "success") {
              alert(
                "载荷连接成功！"
                + "\nsys_version: " + json_data['sys_version']
                + "\napp_version: " + json_data['app_version']
                + "\ntimeline_cycle: " + json_data['timeline_cycle']
                + "\ndetection_cycle: " + json_data['detection_cycle']
              )
            }
            else {
              alert(json_data.status)
            }
          })
    }

  </script>
</html>